<template>
  <div class="all">
    <div class="class">
      <div class="class-header">
        <div class="header-left">
          <div class="line"></div>
          <div class="title">学生请假记录</div>
          <el-input
            v-model="classSearchInput"
            placeholder="请输入姓名"
            style="width: 150px"
            class="className"
          ></el-input>
          <el-date-picker
            v-model="currentYearMonth"
            type="month"
            placeholder="选择查询时间"
            style="width: 150px"
            value-format="YYYY-MM"
            class="className"
          ></el-date-picker>
          <div style="position: relative">
            <el-button @click="handleSearch" class="search">搜索</el-button>
            <img src="../../assets/images/搜索.png" class="searchImg" alt="" />
          </div>
        </div>
        <div class="header-right"></div>
      </div>
    </div>

    <div class="class-content">
      <el-table :data="tableData" style="width: 100%" @row-click="handleRowClick">
        <el-table-column prop="userName" label="姓名" align="center" />
        <el-table-column prop="roleName" label="职能" align="center" />
        <el-table-column prop="reason" label="请假事由" align="center" />
        <el-table-column prop="beginTime" label="开始时间" align="center" />
        <el-table-column prop="endTime" label="结束时间" align="center" />
        <el-table-column prop="totalTime" label="请假时长(天)" align="center" />
        <el-table-column prop="status" label="状态" align="center">
          <template #default="{ row }">
            <span :style="{ color: getStatusColor(row.status) }">{{ row.status }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :current-page="currentPage"
          :page-size="pageSize"
          @current-change="handleCurrentPageChange"
        />
        <div> 
            每页
            <el-input-number
              v-model="pageSize"
              :min="1"
              :max="30"
              controls-position="right"
              @change="handleChange"
            />条
        </div>
      </div>
    </div>
      <!-- 展示请假模态框 -->
      <el-drawer  v-model="dialogVisible1" title="请假详情信息" size="700" :show-close="false" style="background-color:#F0F8FF;height:100%">
      <div class="richang">
        <div class="name">
          <span class="name1">姓 名：</span>
          <span class="name2">{{ selectedRow.userName }}</span>
        </div>
        <div class="name">
          <span class="name1">职 能：</span>
          <span class="name2">{{ selectedRow.roleName }}</span>
        </div>
        <div class="name">
          <span class="name1">开始时间：</span>
          <span class="name2">{{ selectedRow.beginTime }}</span>
        </div>
        <div class="date">
          <span class="date1">结束时间：</span>
          <span class="date2">{{ selectedRow.endTime }}</span>
        </div>
        <div class="name">
          <span class="name1">请假时长：</span>
          <span class="name2">{{ selectedRow.totalTime }}</span>
        </div>
        <div class="name">
          <span class="name1">状 态：</span>
          <span :style="{ color: getStatusColor(selectedRow.status) }">{{ selectedRow.status }}</span>
        </div>
        <div class="content">
          <span class="content1">请假事由：</span>
          <span class="content2" v-html="selectedRow.reason"></span>
        </div>


       
      </div>
      <template #footer>
        <el-button @click="dialogVisible1 = false" class="confirm">关闭</el-button>
      </template>
    </el-drawer >
  </div>
</template>
      
    <script setup>
import { ref, onMounted } from 'vue'
import { getLeave, postLeave, getLeaveInfo } from '../api/Leave'
import { ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs' // 引入 dayjs 库

//本地存储
const user = JSON.parse(localStorage.getItem('user'))
const dialogVisible1 = ref(false)

//获取角色信息
const role = user.roleId
// 定义当前年月
const currentYearMonth = ref('')
// 定义搜索框输入的值
const classSearchInput = ref('')
// 定义当前页
const currentPage = ref(1)
// 定义每页显示的条数
const pageSize = ref(7)
// 定义总条数
const total = ref(0)

//获取请假列表
function fetchData() {
  const data = {
    pageIndex: currentPage.value,
    pageSize: pageSize.value,
  }
  if (classSearchInput.value) {
    data.userName = classSearchInput.value
  }
  if (currentYearMonth.value) {
    data.thisMonth = currentYearMonth.value
  }
  if (role == '3') {
    data.userId = user.userId
  }
  getLeave('leavesList', data).then((res) => {
    if (res.code == 200) {
      tableData.value = res.dataset.leaveList
      total.value = res.dataset.pageCount * pageSize.value
    }
  })
}
// 处理当前页变化
const handleCurrentPageChange = (value) => {
  currentPage.value = value
  fetchData()
}

// 处理搜索
const handleSearch = () => {
  currentPage.value = 1 // 重置当前页为第一页
  fetchData()
}

// 获取当前年月
onMounted(() => {
  fetchData()
})

// 表格数据
const tableData = ref([])
// 状态颜色
const getStatusColor = (status) => {
  switch (status) {
    case '通过':
      return 'green'
    case '不通过':
      return 'red'
    case '正在审核中':
      return 'blue'
    default:
      return 'black'
  }
}

// 选中的行数据
const selectedRow = ref(null)

// 处理表格行点击事件
const handleRowClick = (row) => {
  selectedRow.value = row
  dialogVisible1.value = true
}


function handleChange() {
  currentPage.value = 1; // 重置页码为1
  fetchData(currentPage.value,pageSize.value,classSearchInput.value)
}







</script>
      
    <style scoped>
.class {
  width: 90%;
  height: 10%;
  margin-bottom: 20px;
  margin-top: 20px;
}
/* 头部左侧 */
.header-left {
  display: flex;
  align-items: center;
  margin-left: 40px;
}
.line {
  width: 2px;
  height: 20px;
  background-color: #007bff;
}
.title {
  padding-left: 10px;
  font-size: 20px;
  margin-right: 20px;
}
.className {
  margin-right: 10px;
}
.line2 {
  width: 10px;
  height: 2px;
  margin-left: 5px;
  margin-right: 5px;
  background-color: #9b9b9b;
}
:deep(.className .el-input__wrapper) {
  border-radius: 12px !important;
}
.search {
  background-color: #0f6ab1;
  color: #fff;
  border: none;
  margin-left: 10px;
  border-radius: 16px;
  padding: 0;
  padding-right: 15px;
  padding-left: 36px;
}
.searchImg {
  position: absolute;
  top: 8px;
  left: 25px;
}
/* 头部右侧 */
.header-right {
  display: flex;
  align-items: center;
  margin-right: 40px;
}
.currentTime {
  font-size: 15px;
  margin-right: 10px;
}
.calendar-icon {
  display: flex;
  align-items: center;
}
.custom-calendar-icon {
  font-size: 20px; /* 可以根据需要调整图标大小 */
}
.addRiBao {
  margin-left: 10px;
  font-size: 15px;
}

/* 表格区域 */
.class-content {
  width: 90%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 表格数据 */
:deep(.el-table thead th) {
  background-color: #fbfcff !important;
}
:deep(.el-table .cell) {
  color: black;
}
:deep(.details1) {
  margin-left: 55px;
}
/* 报告不能换行 */
:deep(.el-table__body-wrapper .cell) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 分页 */
.page {
  margin-top: 50px;
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
  align-items: center;
}
/* 分页背景色 */
:deep(.el-pager .is-active) {
  background-color: #0f6ab1 !important;
}
/* 模态框 */
:deep(.el-overlay .el-overlay-dialog) {
  position: absolute;
}
:deep(.el-overlay) {
  position: absolute;
}
:deep(.el-dialog__body) {
  display: flex;
  justify-content: center;
}
:deep(.el-dialog) {
  padding: 0px;
  width: 800px;
}
:deep(.el-dialog header span) {
  display: inline-block;
  width: 100%;
  background-color: #0f6ab1;
  height: 40px;
  color: white;
  font-size: 15px;
  text-align: center;
  line-height: 40px;
}
:deep(.el-dialog__footer) {
  text-align: center;
  padding-bottom: 20px;
}
:deep(.confirm) {
  margin-left: 50px;
  background-color: #0f6ab1;
}
:deep(.cancel) {
  background-color: #0f6ab1;
  color: white;
}
:deep(.el-drawer header) {
  background-color: #0f6ab1;
  margin-bottom: 0;
  padding-bottom: 20px;
}
:deep(.el-drawer header span) {
  color: white;
}

:deep(.el-drawer__header span){
  text-align: center;
  color: black;
  font-size: 20px;
}
:deep(.w-e-scroll p) {
  margin: 0;
}
:deep(.confirm) {
  color: white;
  margin-left: 50px;
  background-color: #0f6ab1;
}
.name,
.content,
.date {
  color: black;
  font-size: 15px;
  margin-left: 20px;
  margin-bottom: 20px;
}
</style>